<template>
 <div>
<div class="title">
    <span>我的购物车</span>
    <span style="color: #999;font-size: 12px;">共{{shoppingCartList.length}}门课程</span>
</div>
     <table>
         <tr class="tabT">
             <td>
                 <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="change" >
                     全选
                 </a-checkbox>
                 </td>
             <td>课程名称</td>
             <td>原价</td>
             <td>优惠</td>
             <td>操作</td>
         </tr>
         <a-empty :description="false" v-show="shoppingCartList.length==0" />
         <div  v-for="(item,index) in shoppingCartList" :key="index">
             <tr class="tabC">
                 <td>
                     <a-checkbox :checked="checkd.some(checkditem=>item.shoppingCartId===checkditem)" @change="checkOne(item)" >
                         <img class="img" :src="item.course.coverFileUrl">
                     </a-checkbox>
                 </td>
                 <td>
                    {{item.course.courseTitle}}
                 </td>
                 <td>
                     <del style="color: #999999">￥{{item.course.coursePrice}}</del>
                     <span style="color: red">
                        ￥ {{item.course.discountPrice}}
                     </span>
                 </td>
                 <td>
                 <span class="ant-tag ant-tag-has-color" style="background-color: rgb(255, 85, 0);margin: 0px;border-radius: 2px;">
                     {{item.course.discountDesc}}
                 </span>
                 </td>
                 <td>
                     <a-icon type="delete" style="color: red; font-size:20px;" @click="del(index,item)" />
                 </td>
             </tr>
         </div>
         <div class="settlement">
             <a-checkbox  :indeterminate="indeterminate" :checked="checkAll" @change="change" >
                 全选
             </a-checkbox>
             <button :style="total!=0?'background-color: #FF8000':'background-color: #999'">
                 提交
             </button>
             <div class="price">
                 <span>
                     合计:
                 </span>
                 <span class="num">
                     ￥{{total}}
                 </span>
             </div>
         </div>
     </table>
 </div>
</template>
<script>
    import {getshopCar} from  "../utils/getshopCar"
    import {delShoppingCart} from  "../utils/delShoppingCart"
    export default {
        created() {
            getshopCar(0).then((res)=>{
                this.shoppingCartList=res.data.shoppingCartList
            })
        },
        data(){
    return {
        //半选
        // indeterminate:false,
        //全选
        // checkAll:false,
        shoppingCartList:[],
        checkd:[],
        runningshop:[],
    }
},
methods:{
            del(index,item){
                this.shoppingCartList.splice(index,1)
                console.log(item.shoppingCartId)
                delShoppingCart(item.shoppingCartId).then(res=>{
                    console.log(res)
                })

            },
    //这是全选按钮的点击事件
    change(){
        if(this.checkd.length==this.shoppingCartList.length){
            this.checkd=[]
            this.runningshop=[]
        }else {
            this.checkd=[]
            this.runningshop=[]
            for(var i=0;i<this.shoppingCartList.length;i++){
                  this.checkd.push(this.shoppingCartList[i].shoppingCartId)
                this.runningshop.push(this.shoppingCartList[i].course.discountPrice)
            }
        }
    },
            //这里是点击按钮的点击事件
            checkOne(item){
                if(this.checkd.indexOf(item.shoppingCartId)==-1){

                    this.checkd.push(item.shoppingCartId)
                    this.runningshop.push(item.course.discountPrice)
                }else {
                    this.checkd.splice(this.checkd.indexOf(item.shoppingCartId),1)
                    this.runningshop.splice(this.runningshop.indexOf(item.course.discountPrice),1)
                }
            }
        },
        computed:{
            indeterminate (){
                if(this.checkd.length<this.shoppingCartList.length&&this.checkd.length!=0){
                 return true
                }else if(this.checkd.length==0){
                    return false
                }else {
                    return false
                }
            },
            checkAll (){
                if(this.checkd.length==this.shoppingCartList.length&&this.shoppingCartList.length!=0){
                    return true
                }else {
                    return false
                }
            },
            total(){
                let sum =0
                for (var i =0;i<this.runningshop.length;i++){
                    sum += this.runningshop[i]
                }
                return sum
            },
            Allcheckd(){
                let all=[]
                for(var i=0;i<this.shoppingCartList.length;i++){
                    all.push(this.shoppingCartList[i].shoppingCartId)
                }
                return all
            },
            Allrunningshop(){
                let all=[]
                for(var i=0;i<this.shoppingCartList.length;i++){
                    all.push(this.shoppingCartList[i].course.discountPrice)
                }
                return all
            }
        }
    }
</script>
<style lang="less" scoped>
.title{
    text-align: left;
    padding: 15px;

}
    .tabT{
        display: flex;
        width: 100%;
        height: 50px;
        line-height: 50px;
        border: 1px solid #E8E8E8;
        background-color: #FAFAFA;
        td{
            display: block;
            height: 40px;
            width: 234px;
            text-align: left;
            padding-left: 10px;
        }
    }
.tabC{
    display: flex;
    width: 100%;
    height: 120px;
    line-height: 98px;
    border: 1px solid #E8E8E8;
    background-color: #FAFAFA;
    margin-top: 20px;
    td{
        display: block;
        /*height: 40px;*/
        width: 234px;
        text-align: left;
        padding: 10px 0px 10px 10px;
    }
}
    .img{
        width: 156px;
        height: 100%;
        /*margin-left: 10px;*/
    }

    .settlement{
        text-align: left;
        background-color: #eee;
        border: 1px solid #e4e4e4;
        height: 60px;
        margin: 20px 0;
        line-height: 60px;
        padding-left: 10px;
        button{
            float: right;
            border: none;
            outline: none;
            background-color: #999;
            height: 103%;
            margin-top: -1px;
            width: 120px;
            cursor: default;
            color: white;
            font-size: 20px;
        }
    }
    .price{
        float: right;
        padding-right: 15px;
    }
    .num{
        color: red;
        font-size: 20px;
    }
</style>
